¡Hola 👋! Espera mientras comienza la sesión.
Antes que todo, ¿cómo están?
Visualización de Información
IIC2026 2020-2
Introducción a JavaScript y D3.js
Visualización de Información
IIC2026 2020-2
Repaso
Repaso
1. JavaScript I
2. JavaScript II
3. DOM
4. D3.js
Implementación algorítmica
- Código.
- Nivel técnico tecnológico.
- Se revisa eficiencia, escalabilidad y dificultad.
// programa_1.js
let arreglo = [];
for (let numero = 0; numero <= 20; numero += 2) {
arreglo.push(numero);
}
for (numero of arreglo) {
console.log(numero);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo con JS 1</title>
</head>
<body>
<script src='programa_1.js' charset='utf-8'></script>
</body>
</html>
JavaScript
¡Es mucho! Iremos revisando detalles nuevos a medida que pasa el curso.
Ten curiosidad y busca en la web por referencias de aprendizaje. Recomiendo: MDN Web Docs.
¡O pregúntanos! 😄
Document Object Model
(Fuente: DOM en Wikipedia)
Document Object Model
const raiz = document.getElementById("raiz");
const principal = document.getElementById("principal");
let contador = 0;
principal.addEventListener("click", () => {
contador += 1;
const parrafo = document.createElement("p");
const texto = document.createTextNode(`Número de clics: ${contador}`);
parrafo.appendChild(texto);
raiz.appendChild(parrafo);
});
D3.js
- Su intención es utilizar HTML, CSS y SVG para crear visualizaciones.
- Apareció en un momento en que esto no era común para herramientas de visualización.
- Escrita por Mike Bostock.
D3.js
NO es una librería de visualización de alto nivel.
const grafico_de_barra = crear(); // ❌
grafico_de_barra.graficar(); // ❌
D3.js
Utilizaremos la versión 5 en el curso.
👀 con encontrar recursos y ejemplos escritos en la versión 3 o 4.
Podrán encontrar muchos ejemplos en la web.
Le dedicaremos tiempo a aprender D3.js en el curso. ¡Aprovechenlo!
Utilizar D3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo con D3</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script src='programa_4.js' charset='utf-8'></script>
</body>
</html>
¿Más dudas?
¡Visualización del día!
¡Visualización del día!
Propuesto por estudiante Claudio Scheihing Cuevas.
(Fuente: U.S. Gun Deaths)
Próximos eventos:
Hoy (20:00) termina plazo de Entrega 1.
Próximos eventos:
Hoy (20:00) termina plazo de Entrega 1.
Hoy (20:00) se publica el enunciado de Hito 1.
Próximos eventos:
Hoy (20:00) termina plazo de Entrega 1.
Hoy (20:00) se publica el enunciado de Hito 1.
Ya que nos encontramos en semana universitaria (hasta viernes 28 de agosto), la fecha de entrega de Hito 1 queda para dos semanas a partir de viernes 28 de agosto.
Próximos eventos:
Hoy (20:00) termina plazo de Entrega 1.
Hoy (20:00) se publica el enunciado de Hito 1.
Ya que nos encontramos en semana universitaria (hasta viernes 28 de agosto), la fecha de entrega de Hito 1 queda para dos semanas a partir de viernes 28 de agosto.
Se ralizará un ajuste de calendario, mañana se anunciará los detalles de la próxima semana.